<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>loading</title>
    <style type="text/css" media="screen">
    .page {
        width: 200px;
        height: 200px;
        border: 1px solid #4b86db;
    }
    .container {
        width: 64px;
        height: 64px;
        position: relative;
        margin: 68px auto;
    }
    .out-circle {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 46px;
        height: 46px;
        border: 4px solid #4b86db;
        border-radius: 27px;
    }
    .out-cover {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 0;
        height: 0;
        border: 27px solid transparent;
        border-left-color: #fff;
        animation: spin 800ms infinite linear;
    }
   .in-circle1, .in-circle2 {
        width: 38px;
        height: 38px;
        border-radius: 40px;
        overflow: hidden;
        position: absolute;
        left: 13px;
        top: 13px;
    }
    .in-circle1 {
        opacity: 1;
        background-color: #89abdd;
        animation: hide 1.6s steps(1, end) infinite;
    }
    .in-circle2 {
        opacity: 0;
        background-color: #4b86db;
        animation: show 1.6s steps(1, end) infinite;
    }
   .bottom, .middle, .cover {
        position: absolute;
        width: 50%;
        height: 100%;
    }
   .bottom {
        border-radius: 40px 0 0 40px;
        background-color: #4b86db;
        transform-origin: right center;
        animation: spin 800ms infinite linear; left: 0; top: 0;
    }
   .middle {
        border-radius: 0 40px 40px 0;
        background-color: #4b86db;
        animation: hide 800ms steps(1, end) infinite; left: 50%; top: 0; opacity: 1;
    }
   .cover {
        border-radius: 40px 0 0 40px;
        background-color: #89abdd;
        animation: show 800ms steps(1, end) infinite; left: 0; top: 0; opacity: 0;
    }
   .in-circle2 .bottom, .in-circle2 .middle { background-color: #89abdd; }
   .in-circle2 .cover { background-color: #4b86db; }
@keyframes spin {
  0%   { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes hide {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes show {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}
    </style>
</head>
<body>
<div class="page">
<div class="container">
    <div class="out-circle"></div>
    <div class="out-cover"></div>
    <div class="in-circle1">
        <div class="bottom"></div>
        <div class="middle"></div>
        <div class="cover"></div>
    </div>
    <div class="in-circle2">
        <div class="bottom"></div>
        <div class="middle"></div>
        <div class="cover"></div>
    </div>
</div>
</div>
</body>
</html>